<template>
  <div class="mform">
    <div class="back">
      <Back>
        <div class="form-btn">
        </div>
      </Back>
    </div>
    <el-scrollbar style="height: 100%;">
      <div class="form-content">
        <el-divider content-position="left">订单信息</el-divider>
        <el-descriptions :column="3" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                订单号
              </div>
            </template>
            {{ info.order_sn }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                订单状态
              </div>
            </template>
            {{ info.state_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                创建时间
              </div>
            </template>
            {{ info.create_time }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                订单金额
              </div>
            </template>
            {{ info.original_amount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                优惠券金额
              </div>
            </template>
            {{ info.coupon_amount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                折扣金额
              </div>
            </template>
            {{ info.discount_amount }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                满减金额
              </div>
            </template>
            {{ info.manjian_amount }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                支付金额
              </div>
            </template>
            {{ info.payment_amount }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                支付方式
              </div>
            </template>
            {{ info.pay_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                支付时间
              </div>
            </template>
            {{ info.pay_time }}
          </el-descriptions-item>

        </el-descriptions>
        <el-divider content-position="left">会员信息</el-divider>
        <el-descriptions :column="3" border v-if="info.addr_info">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                会员ID
              </div>
            </template>
            {{ info.user_id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                会员手机号
              </div>
            </template>
            {{ info.user_phone }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left">邮寄信息</el-divider>
        <el-descriptions :column="3" border v-if="info.addr_info">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                收货人
              </div>
            </template>
            {{ info.addr_info.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                收货人手机号
              </div>
            </template>
            {{ info.addr_info.mobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                收货地址
              </div>
            </template>
            {{ info.addr_info.province }}{{ info.addr_info.city }}{{ info.addr_info.district }}{{ info.addr_info.street }}{{ info.addr_info.address }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                物流公司
              </div>
            </template>
            {{ info.express_company }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                物流单号
              </div>
            </template>
            {{ info.express_no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                发货时间
              </div>
            </template>
            {{ info.delivery_time }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left">商品信息</el-divider>
        <el-table :data="info.goods_list" border style="width:100%">
          <el-table-column label="图片" prop="name" align="center">
            <template #default="goods">
              <img :src="$imgUrl + goods.row.image" style="width: 50px; height: 50px" alt="">
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name" align="center" />
          <el-table-column label="单价" prop="price" align="center" />
          <el-table-column label="数量" prop="count" align="center" />
          <el-table-column label="属性" prop="mdl" align="center" />
          <el-table-column label="总价" prop="total_original_price" align="center" />
        </el-table>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup name="OrderDetail">
const { proxy } = getCurrentInstance()

const info = reactive({});

onMounted(() => {
  // 编辑
  let order_sn = proxy.$route.query.order_sn || null;
  if (order_sn) {
    getDetail(order_sn)
  }
});


async function getDetail(order_sn) {
  let res = await proxy.$post('OrderDetail', {
    order_sn
  }, false)
  if (res.code === 0) {
    Object.assign(info, res.data);
  }
}

</script>
<style scoped lang="scss"></style>
<style lang="scss" scoped>
.form-content {
  padding: 0 20px;
}
</style>
